<template>
	<view>
		<view style="display: flex;">
			<u-button type="primary" text="记录故障" @click="add"
				v-if="(user.Roles.indexOf('故障审核角色')>-1 || user.Roles.indexOf('故障填报角色')>-1)"></u-button>
			<u-button type="success" text="切换" @click="pickShow = true"></u-button>
		</view>
		<u-sticky>
			<!-- <u-subsection :list="lt" :current="current"  ></u-subsection> -->
			<view class="countTime">
				<view class="wrap">
					<view class="box" v-for="(item,index) in disstatus" :key="index" @click="toggleItem(index)">
						<view class="selBox" :style="[itemStyle(index)]">
							<view class="countBox">
								<text class="count">{{item.status}}</text>
								<u-badge type="error" max="99" :value="item.count" style="position: absolute; top: 0; left: 16vw;" ></u-badge>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<u-picker :show="pickShow" :columns="columns" @confirm="change" @cancel="pickShow = false"
			:closeOnClickOverlay="true" @close="pickShow = false" :immediateChange="true"></u-picker>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in list" :key="index">
				<u-cell :title="(index+1)+'.'+item.Name" :label="((item.IP && !item.OrderId) ? 'IP: '+item.IP : '地址: '+item.CustAddr ) +' 时间：'+(item.CreateTime || '') 
				+(item.CmMac ? ' CM物理地址：' + item.CmMac : '')  + ' ' + ((item.FlowInof && item.FlowInof.UserName!='admin') ? '当前处理人: '+item.FlowInof.UserName : '')" isLink :name="item.Id" @click="openpage"
									icon="https://cdn.uviewui.com/uview/example/tag.png">
				</u-cell>
			</u-list-item>
			<u-loadmore :status="status" v-if="loading" :icon="true"/>
		</u-list>

	</view>
</template>

<script>
	import {
		getfaultlist,
		faultgetcount
	} from '@/common/api.js'
	export default {
		data() {
			return {
				current: 0,
				user: JSON.parse(uni.getStorageSync("$userinfo")),
				list: [],
				pageIndex: 1, //当前页数
				pageSize: 20, //页数大小
				totalPage: "", //总页数
				total: 0, //数据总数
				status: 'loadmore', //加载状态
				loading: true,
				pickShow:false,
				disstatus: [{
					"status": "待派工",
					"count": 0,
				},{
					"status": "处理中",
					"count": 0,
				},{
					"status": "待审核",
					"count": 0,
				},{
					"status": "已完成",
				},{
					"status": "草稿箱",
					"count": 0,
					"userId": JSON.parse(uni.getStorageSync("$userinfo")).Id,
				}],
				currentIndex: 0,
				themColor: "#FFFFFF",
				columns:[
					['96335工单','自动工单','全部工单']
				],
				types: '96335工单'
			}
		},
		onShow() {
			this.list = []
			this.pageIndex = 1
			this.getlist()
			// this.getcount()
		},
		computed: {
			itemStyle() {
				return index => {
					let style = {}
					if (index === this.currentIndex) {
						style.backgroundColor = this.themColor;
						style.border = `1px solid ${this.themColor}`;
						style.color = '#3C9CFF';
					}
					return style
				}
			},

		},
		methods: {
			toggleItem(idx) {
				this.currentIndex = idx
				this.list = []
				this.pageIndex = 1
				this.getlist()
			},
			getcount()
			{
				faultgetcount().then(e=>{
					this.disstatus[0].count = e[this.disstatus[0].status]
					this.disstatus[1].count = e[this.disstatus[1].status]
					this.disstatus[2].count = e[this.disstatus[2].status]
					this.disstatus[4].count = e[this.disstatus[4].status]
				})
			},
			async getlist() {
				this.status = 'loading'
				this.getcount()
				let para = {
					Parameters: [],
				}
				para.Parameters.push({
					FieldName: "Status",
					ConditionalType: "Equal",
					FieldValue: this.disstatus[this.currentIndex].status,
				},{
					FieldName: "CreatorId",
					ConditionalType: "Like",
					FieldValue: this.disstatus[this.currentIndex].userId || "",
				})
				if(this.types == '自动工单'){
					para.Parameters.push({
						FieldName: "OrderId",
						ConditionalType: "IsNullOrEmpty",
					})
				}else if (this.types == '96335工单'){
					para.Parameters.push({
						FieldName: "OrderId",
						ConditionalType: "IsNot",
						FieldValue: null
					})
				}
				// para.Parameters.push({
				// 	FieldName: "Name",
				// 	ConditionalType: "Like",
				// 	FieldValue: "",
				// })
				para.OrderBys = ['CreateTime desc']
				para.pageSize = this.pageSize
				para.pageIndex = this.pageIndex

				await getfaultlist(para).then(res => {
					let data = res.data
					this.total = res.count
					this.list.push(...data)
					this.totalPage = Math.ceil(this.total / this.pageSize)
					if (this.pageIndex >= this.totalPage) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
				})
				// if(this.currentIndex == 0)
				// this.disstatus[this.currentIndex].count = this.total
			},
			scrolltolower() {
				// 如果当前页数大于等于总页数，状态修改为没有更多了，不再继续往下执行代码
				if (this.pageIndex >= this.totalPage) {
					this.status = 'nomore';
					return;
				};
				this.status = 'loading'; //状态改为加载中
				this.pageIndex = ++this.pageIndex; //页面新增一页
				this.getlist(); //修改页数后，重新获取数据
			},
			add() {
				uni.navigateTo({
					url: "addfault"
				})
			},
			openpage(e) {
				uni.navigateTo({
					url: "faultdetail?id=" + e.name
				})
			},
			change(e){
				this.types = e.value[0]
				this.list = []
				this.pageIndex = 1
				this.getlist()
				this.pickShow = false
			}
			// async searchlist(){
			// 	this.buildlist = [] //初始化
			// 	this.pageIndex = 1 //初始化当前页数为1
			// 	this.loading = true
			// 	await this.getlist()
			// 	if(this.buildlist.length < this.pageSize){
			// 		this.loading = false; //如果数据列表小于当前页数，就让加载标签消失
			// 	}
			// },
		}
	}
</script>
<style lang="scss">
	.countTime {
		display: flex;
		flex-direction: column;

		.title {
			margin: 20rpx 0;
		}

		.wrap {
			display: flex;

			.box {
				width: 50%;

				// &:nth-child(2) {
				// 	&>.selBox {
				// 		border-left: none;
				// 		border-right: none;
				// 	}
				// }
				.selBox {
					text-align: center;
					width: 100%;
					height: 35px;
					background-color: #EEEEEF;
					line-height: 35px;

					.countBox {
						margin-bottom: 10rpx;
						font-size: 14px;
						position: relative;
						.count {
							margin-left: 5px;
						}
					}
				}

				.countPrice {
					margin-top: 10rpx;
				}
			}
		}
	}
</style>